<template>
	<view class="pay">
		<view class="navigation">
			<view class="navigation_back" @tap="backref()">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<view class="navigation_title">
				订单支付
			</view>
		</view>
		<view class="pay_con">
			<view class="pay_price">
				¥152.14
			</view>
			<view class="pay_time">
				支付剩余时间00:15:00
			</view>
			<view class="pay_types">
				<view class="pay_type">
					<image src="../../static/image/shop/balance.svg" mode=""></image>
					<text>余额支付</text>
					<view class="pay_checked">
						<label>
							<radio :checked="payType == 1" @tap="payType = 1"/>
						</label>
					</view>
				</view>
				<view class="pay_type">
					<image src="../../static/image/shop/wechat.svg" mode=""></image>
					<text>微信支付</text>
					<view class="pay_checked">
						<label>
							<radio :checked="payType == 2" @tap="payType = 2"/>
						</label>
					</view>
				</view>
			</view>
			<view class="pay_btn">
				<button @tap="surePay()">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payType:1
			};
		},
		methods: {
			backref() {
				uni.navigateBack({
					delta: 1
				})
			},
			surePay(){
				uni.navigateTo({
					url:'/pages/order/detail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.navigation {
		width: 100%;
		height: 150rpx;
		padding: 60rpx 24rpx 0;
		text-align: center;
		position: relative;

		.navigation_back {
			position: absolute;
			top: 60rpx;
		}

		.navigation_title {
			color: #333;
			font-size: 36rpx;
		}
	}

	.pay_con {
		padding: 0 24rpx;

		.pay_price {
			font-size: 90rpx;
			color: #000000;
			text-align: center;
			margin-top: 40rpx;
		}

		.pay_time {
			font-size: 36rpx;
			color: #9098A0;
			text-align: center;
			margin-top: 20rpx;
		}

		.pay_types {
			margin-top: 40rpx;
			border-radius: 12rpx;
			background-color: #F9FBFC;
			padding: 15rpx 32rpx;

			.pay_type {
				display: flex;
				align-items: center;
				padding: 15rpx 0;

				image {
					width: 52rpx;
					height: 52rpx;
				}

				text {
					font-size: 30rpx;
					color: #2E343A;
					margin-left: 24rpx;
				}
				.pay_checked{
					position: absolute;
					right: 32rpx;
				}
			}
		}

		.pay_btn {
			position: fixed;
			bottom: 60rpx;
			left: 0;
			width: 100%;
			padding: 0 24rpx;
			
			button {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 80rpx;
				background-color: #2588FF;
				border: 0;
				color: #fff;
				font-size: 26rpx;
			}
		}
	}
</style>